@import '@/common/style/flex.scss';
@mixin smallBlack($pd:8rpx,$mr:10rpx,$br:6rpx) {
	padding: $pd;
	margin-right: $mr;
	border-radius: $br;
}
@mixin smallBlackColor($cl:#fff,$bc:none,$border:none){
	color: $cl;
	background-color: $bc;
	border: $border;
}
$margin-top: 40rpx;
$fontSize:24rpx;
.clearFix::after,.clearFix::before{
	display: table;
	content: ' ';
	height: 0;
	width: 0;
	clear:both;
	overflow: hidden;
}
.index{
	@include flex-c;
	position: relative;
	z-index: 1;
	>.header{
		position: relative;
		flex: 0 0 auto;
		// position: fixed;
		// top: 0;
		// left: 0;
		// right: 0;
		// z-index: 2;
	}
	>.section{
		flex: 1 0 0;
		// flex: 1;
		overflow: auto;
		position: relative;
		z-index: 1;
		&::-webkit-scrollbar{
			display: none;
		}
		.boxTop{
			width: 100%;
			position: relative;
			.backgroundBlur {
				// position: absolute;
				width: 100%;
				height: 240rpx;
				// z-index: 0;
				background-image: linear-gradient(to right, #1a89fc, #1760fc);
			}
			
			.askForLeave {
				// margin-top: $margin-top;
				position: absolute;
				top: $margin-top;
				left: 5%;
				right: 5%;
				background-color: #ffffff;
				border-radius: 20rpx;
				padding: 20rpx;
				z-index: 1;
				box-shadow: 0 2rpx 10rpx 1rpx rgba(0, 0, 0, .1);
				.top{
					.top-brief{
						margin-bottom: 10rpx;
						.top-brief_certainly{
							@include smallBlack(8rpx 10rpx,10rpx,10rpx);
							@include smallBlackColor(#fff,#cf0d18)
						}
					}
					.top-style{
						.top-style_dog{
							font-size: $fontSize - 2;
							@include smallBlackColor(#ef5f6a,#fcebe8,1rpx solid #d6aea9);
							@include smallBlack;
						}
						.top-style_moral{
							font-size: $fontSize - 2;
							@include smallBlackColor(#fff,#db2938);
							@include smallBlack(8rpx 15rpx,10rpx);
						}
					}
				}
				.centre{
					margin-top: $margin-top;
					font-size: $fontSize + 4;
					& view{
						margin-bottom: 10rpx;
					}
				}
				.bottomMap{
					margin-top: $margin-top;
					height: 180rpx;
					overflow: hidden;
				}
			}
		}
		.signs{
			margin-top: $margin-top;
			@include flex-r-evely-start ;
			& button{
				font-size: $fontSize;
				width: 290rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 100rpx;
			}
			& button:first-child{
				color: #fff;
				background-image: linear-gradient(to right,#1987fc,#1761fc);
			}
			& button:last-child{
				background-image: linear-gradient(to right,#e3e3e3,#e3e3e3);
			}
		}
		.moveAbout{
			margin: 60rpx auto 0;
			padding: 0 40rpx;
			.moveTop{
				margin-bottom: $margin-top;
			}
			.list{
				@include flex-c;
				.item{
					@include flex-r;
					background-color: #f7f7f7;
					padding: 20rpx;
					border-radius: 10rpx;
					&:not(:first-child){
						margin-top: $margin-top - 20;
					}
					.item-left{
						width: 160rpx;
						height: 160rpx;
						position: relative;
						>text:first-child{
							font-size: $fontSize - 2;
							position: absolute;
							@include smallBlackColor(#fff, #fc361d);
							@include smallBlack(8rpx 20rpx, 0);
						}
						.imgs{
							border: 1px solid red;
						}
						.backColor{
							position: absolute;
							font-size: $fontSize - 2;
							color: #fff;
							width: 100%;
							bottom: 0;
							padding: 10rpx;
							text-align: center;
							background-color: rgba(0, 0, 0, .5);
						}
					}
					.item-right{
						flex-grow: 1;
						margin: 0 10rpx 0 $margin-top - 10;
						@include flex-r-between-start;
						.item-right_text{
							font-size: $fontSize;
							.certainly{
								@include smallBlack(8rpx 10rpx,10rpx,10rpx);
								@include smallBlackColor(#fff,#cf0d18)
							}
							.centre{
								margin-top: $margin-top;
								font-size: $fontSize - 4;
							}
						}
						.item-right_but{
							@include flex-r-center-center;
							> button{
								font-size: $fontSize - 2;
								width: 110rpx;
								height: 50rpx;
								line-height: 50rpx;
								border: 1rpx solid #b1b1b1;
								border-radius: 50rpx;
								background-color: #e3e3e3;
							}
						}
					}
				}
			}
		}
		
	}
		
	}